<template>
  <div>
    <header-ele/>
    <slider/>
    <div>
      <section class="category-list">
        <router-link tag="div" to="/sort" v-for="item in categoryList" :key="item.categoryid">
          <img :src="item.imgUrl"> <span>{{item.name}}</span>
        </router-link>
      <!-- <div  ></div> -->
    </section>
    
    <section class="floor-list" >
      
      <div v-for="(item,index) in floorList" :key="index">
        <img :src="item.headUrl" class="imgCut">
        <div class="floor-content" >
            <div class="floor-category" v-for="val in item.list" :key="val.categoryId">
                <p>{{val.title}}</p>
                <p>{{val.desc}}</p>
                <div class="floor-products"><img :src="imgs.imgUrl" v-for="imgs in val.products" :key="imgs.imgcategoryId"></div>
            </div>
          
        </div>
    </div>

    </section>
    </div>
    
  </div>
</template>

<script>

import headerEle from './components/header.vue'
import slider from '../../components/slider.vue'
export default {
  data(){
    return  {
      categoryList:null,
      floorList:null,
      imgList:null
    }
  },
  created(){
      this.$store.commit('changeFooterShow',true)
    this.$axios({
                method:'get',
                url:'home/category',

            }).then((res)=>{
                this.categoryList = res.data.data
            })
    this.$axios({
                method:'get',
                url:'home/floorlist',

            }).then((res)=>{
                this.floorList = res.data.data
            })    
     this.$axios({
                method:'get',
                url:'home/sliders',

            }).then((res)=>{
                this.imgList = res.data.data
            })   
  },
    components:{
      headerEle,
      slider
    },
}
        

</script>

<style lang="scss" >


.floor-list,.category-list,.floor-content{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.category-list{
  div{
    width: 20%;
    box-sizing: border-box;
    padding: 20px;
    text-align:center;
    img{
      width: 100%;
    }
  }
}
.imgCut{
  width: 100%;
}
.floor-list,
.floor-content{
  .floor-category{
    padding: 10px;
    width: 50%;
    border-right: 5px solid #dcdcdc;
    border-bottom: 5px solid #dcdcdc;
    box-sizing: border-box;
    p{
      margin: 0;
      text-indent:.3rem;
    }
    p:nth-of-type(1){
      font-size: 40px;
    }
    p:nth-of-type(2){
      padding: 8px 0;
      font-size: 28px;
      color: #f63515;
    }
    .floor-products{
      overflow: hidden;
      img{
        float:left;
        display: block;
        width: 50%;
    }}
  }
}
</style>